/**
 * React Native Demo Page for MasterBoy
 *
 * @format
 */

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  useColorScheme,
} from 'react-native';

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? '#1a1a1a' : '#f5f5f5',
    flex: 1,
  };

  const features = [
    {
      title: 'React Native 集成成功',
      description: '你已经成功将 React Native 集成到 iOS 原生应用中',
      icon: '✅',
    },
    {
      title: 'Hermes 引擎',
      description: '使用 Hermes JavaScript 引擎，提升应用性能',
      icon: '⚡',
    },
    {
      title: '热更新支持',
      description: 'React Native 支持热更新，无需重新安装应用',
      icon: '🔥',
    },
    {
      title: '跨平台开发',
      description: '同一套代码可以在 iOS 和 Android 上运行',
      icon: '📱',
    },
  ];

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <View style={styles.container}>
          {/* Header */}
          <View style={styles.header}>
            <Text style={[styles.title, isDarkMode && styles.titleDark]}>
              Welcome to React Native
            </Text>
            <Text style={[styles.subtitle, isDarkMode && styles.subtitleDark]}>
              MasterBoy + React Native 0.82.1
            </Text>
          </View>

          {/* Features */}
          <View style={styles.featuresContainer}>
            {features.map((feature, index) => (
              <View
                key={index}
                style={[
                  styles.featureCard,
                  isDarkMode && styles.featureCardDark,
                ]}>
                <Text style={styles.featureIcon}>{feature.icon}</Text>
                <View style={styles.featureContent}>
                  <Text
                    style={[
                      styles.featureTitle,
                      isDarkMode && styles.featureTitleDark,
                    ]}>
                    {feature.title}
                  </Text>
                  <Text
                    style={[
                      styles.featureDescription,
                      isDarkMode && styles.featureDescriptionDark,
                    ]}>
                    {feature.description}
                  </Text>
                </View>
              </View>
            ))}
          </View>

          {/* Action Button */}
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              console.log('Button pressed!');
              // 这里可以调用原生代码或执行其他操作
            }}>
            <Text style={styles.buttonText}>开始使用 React Native</Text>
          </TouchableOpacity>

          {/* Footer */}
          <View style={styles.footer}>
            <Text style={[styles.footerText, isDarkMode && styles.footerTextDark]}>
              Powered by React Native {'\n'}
              © 2025 MasterBoy
            </Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  header: {
    marginTop: 20,
    marginBottom: 30,
    alignItems: 'center',
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
    textAlign: 'center',
  },
  titleDark: {
    color: '#fff',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
  },
  subtitleDark: {
    color: '#aaa',
  },
  featuresContainer: {
    marginBottom: 30,
  },
  featureCard: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 20,
    marginBottom: 16,
    flexDirection: 'row',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  featureCardDark: {
    backgroundColor: '#2a2a2a',
  },
  featureIcon: {
    fontSize: 40,
    marginRight: 16,
  },
  featureContent: {
    flex: 1,
  },
  featureTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
    marginBottom: 6,
  },
  featureTitleDark: {
    color: '#fff',
  },
  featureDescription: {
    fontSize: 14,
    color: '#666',
    lineHeight: 20,
  },
  featureDescriptionDark: {
    color: '#aaa',
  },
  button: {
    backgroundColor: '#007AFF',
    borderRadius: 12,
    padding: 16,
    alignItems: 'center',
    marginBottom: 30,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
  },
  footer: {
    alignItems: 'center',
    paddingVertical: 20,
  },
  footerText: {
    fontSize: 14,
    color: '#999',
    textAlign: 'center',
    lineHeight: 22,
  },
  footerTextDark: {
    color: '#666',
  },
});

export default App;
